<template>
  <VForm
    ref="refForm"
    v-model="isFormValid"
  >
    <VRow class="lf-config-row">
      <VCol cols="6">
        <VTextField
          v-model="configId"
          class="lf-config-item"
          counter
          clearable
          :rules="[requiredValidator]"
          maxlength="50"
          color="success"
          hint="配置项ID"
          label="配置项ID"
        />
      </VCol>
      <VCol cols="6">
        <VTextField
          v-model="configName"
          class="lf-config-item"
          counter
          clearable
          :rules="[requiredValidator]"
          maxlength="50"
          color="success"
          hint="配置项名称"
          label="配置项名称"
        />
      </VCol>
    </VRow>

    <VRadioGroup
      v-model="ruleType"
      inline
      style="margin-block: 24px 24px;"
    >
      <!--
        <template #label>
        <div><strong>规则类型</strong></div>
        </template> 
      -->
      
      <VRadio
        v-for="radio in props.option.ruleType.list"
        :key="radio.value"
        :label="radio.title"
        color="primary"
        :value="radio.value"
      />
    </VRadioGroup>

    <VsDivider
      background="success"
      color="#0a540a"
    >
      扩展配置
    </VsDivider>

    <VRadioGroup
      v-if="ruleType != 'ruleSource' && ruleType != 'ruleSourceCustom'"
      v-model="configType"
      inline
      style="margin-block: 24px 24px;"
    >
      <VRadio
        v-for="radio in props.option.configType.list"
        :key="radio.value"
        :label="radio.title"
        color="primary"
        :value="radio.value"
      />
    </VRadioGroup>

    <VRow
      v-if="ruleType == 'ruleSource'"
      class="lf-config-row"
    >
      <VCol cols="12">
        <VTextField
          v-model="ruleSource"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="规则文件路径: liteflow.rule-source=config/flow.el.xml"
          label="liteflow.rule-source"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
    </VRow>

    <VRow
      v-if="configType == 2 && ruleType != 'ruleSource' && ruleType != 'ruleSourceCustom'"
      class="lf-config-row"
    >
      <VCol cols="12">
        <VTextarea
          v-model="ruleSourceExtData"
          class="lf-config-item"
          counter
          maxlength="2500"
          color="success"
          hint="rule-source-ext-data"
          auto-grow
          rows="5"
          row-height="15"
          label="liteflow.rule-source-ext-data 格式为JSON字符串"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
    </VRow>

    <VRow
      v-if="ruleType == 'ruleSourceZk' && configType == 1"
      class="lf-config-row"
    >
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapZk.connectStr"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="zk的连接串，可以是集群，例如：127.0.0.1:2181,127.0.0.1:2182,127.0.0.1:2183"
          label="liteflow.rule-source-ext-data-map.connectStr"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapZk.chainPath"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="规则目录节点（下面会有很多个规则，一个规则一个节点）"
          label="liteflow.rule-source-ext-data-map.chainPath"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapZk.scriptPath"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="脚本目录节点（下面会有很多个脚本，一个脚本一个节点）"
          label="liteflow.rule-source-ext-data-map.scriptPath"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="zkNode"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="zkNode的节点，只有使用zk作为配置源的时候才起作用，默认值为：/lite-flow/flow"
          label="liteflow.zk-node"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
    </VRow>

    <VRow
      v-if="ruleType == 'ruleSourceSql' && configType == 1"
      class="lf-config-row"
    >
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapSql.url"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="jdbc的连接url"
          label="liteflow.rule-source-ext-data-map.url"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapSql.driverClassName"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="驱动器类名"
          label="liteflow.rule-source-ext-data-map.driverClassName"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapSql.username"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="数据库用户名"
          label="liteflow.rule-source-ext-data-map.username"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapSql.password"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="数据库密码"
          label="liteflow.rule-source-ext-data-map.password"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapSql.applicationName"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="应用名称"
          label="liteflow.rule-source-ext-data-map.applicationName"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapSql.sqlLogEnabled"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="是否开启SQL日志,默认开启"
          label="liteflow.rule-source-ext-data-map.sqlLogEnabled"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapSql.pollingEnabled"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="是否开启SQL数据轮询自动刷新机制,默认不开启"
          label="liteflow.rule-source-ext-data-map.pollingEnabled"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapSql.pollingIntervalSeconds"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="SQL数据轮询时间间隔(s),默认为60s"
          label="liteflow.rule-source-ext-data-map.pollingIntervalSeconds"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapSql.pollingStartSeconds"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="规则配置后首次轮询的起始时间(s),默认为60s"
          label="liteflow.rule-source-ext-data-map.pollingStartSeconds"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapSql.chainTableName"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="编排规则表的表名"
          label="liteflow.rule-source-ext-data-map.chainTableName"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapSql.chainApplicationNameField"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="编排规则表中应用名称存储字段名"
          label="liteflow.rule-source-ext-data-map.chainApplicationNameField"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapSql.chainNameField"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="规则名称存储的字段名"
          label="liteflow.rule-source-ext-data-map.chainNameField"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapSql.elDataField"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="EL表达式的字段(只存EL)"
          label="liteflow.rule-source-ext-data-map.elDataField"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapSql.chainEnableField"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="此chain是否生效，此字段最好在mysql中定义成tinyInt类型"
          label="liteflow.rule-source-ext-data-map.chainEnableField"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapSql.scriptTableName"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="你的脚本存储表的表名"
          label="liteflow.rule-source-ext-data-map.scriptTableName"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapSql.scriptApplicationNameField"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="脚本表中应用名称存储字段名"
          label="liteflow.rule-source-ext-data-map.scriptApplicationNameField"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapSql.scriptIdField"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="脚本组件的Id的字段名"
          label="liteflow.rule-source-ext-data-map.scriptIdField"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapSql.scriptNameField"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="脚本组件名称的字段名"
          label="liteflow.rule-source-ext-data-map.scriptNameField"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapSql.scriptDataField"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="脚本数据的字段名"
          label="liteflow.rule-source-ext-data-map.scriptDataField"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapSql.scriptTypeField"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="脚本类型的字段名(类型参照定义脚本组件)"
          label="liteflow.rule-source-ext-data-map.scriptTypeField"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapSql.scriptLanguageField"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="脚本语言类型（groovy | qlexpress | js | python | lua | aviator | java）"
          label="liteflow.rule-source-ext-data-map.scriptLanguageField"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapSql.scriptEnableField"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="此脚本是否生效，此字段最好在mysql中定义成tinyInt类型"
          label="liteflow.rule-source-ext-data-map.scriptEnableField"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
    </VRow>

    <VRow
      v-if="ruleType == 'ruleSourceNacos' && configType == 1"
      class="lf-config-row"
    >
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapNacos.serverAddr"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="nacos的连接串"
          label="liteflow.rule-source-ext-data-map.serverAddr"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapNacos.dataId"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="整个规则+脚本的xml存储数据节点id"
          label="liteflow.rule-source-ext-data-map.dataId"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapNacos.group"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="nacos的group"
          label="liteflow.rule-source-ext-data-map.group"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapNacos.namespace"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="nacos的namespace"
          label="liteflow.rule-source-ext-data-map.namespace"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapNacos.username"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="nacos的用户"
          label="liteflow.rule-source-ext-data-map.username"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapNacos.password"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="nacos的密码"
          label="liteflow.rule-source-ext-data-map.password"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapNacos.accessKey"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="阿里云的accessKey"
          label="liteflow.rule-source-ext-data-map.accessKey"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapNacos.secretKey"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="阿里云的secretKey"
          label="liteflow.rule-source-ext-data-map.secretKey"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
    </VRow>

    <VRow
      v-if="ruleType == 'ruleSourceEtcd' && configType == 1"
      class="lf-config-row"
    >
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapEtcd.endpoints"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="etcd的连接串"
          label="liteflow.rule-source-ext-data-map.endpoints"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapEtcd.chainPath"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="规则目录节点（下面会有很多个规则，一个规则一个节点）"
          label="liteflow.rule-source-ext-data-map.chainPath"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapEtcd.scriptPath"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="脚本目录节点（下面会有很多个脚本，一个脚本一个节点）"
          label="liteflow.rule-source-ext-data-map.scriptPath"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
    </VRow>

    
    <VRow
      v-if="ruleType == 'ruleSourceApollo' && configType == 1"
      class="lf-config-row"
    >
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapApollo.chainNamespace"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="规则命名空间名称"
          label="liteflow.rule-source-ext-data-map.chainNamespace"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapApollo.scriptNamespace"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="脚本命名空间名称"
          label="liteflow.rule-source-ext-data-map.scriptNamespace"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
    </VRow>

    <VRow
      v-if="ruleType == 'ruleSourceRedisPoll' && configType == 1"
      class="lf-config-row"
    >
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapRedisPoll.redisMode"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="Redis模式，single为单点，sentinel为哨兵，默认为单点"
          label="liteflow.rule-source-ext-data-map.redisMode"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapRedisPoll.host"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="单点模式Redis连接IP地址"
          label="liteflow.rule-source-ext-data-map.host"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapRedisPoll.port"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="单点模式Redis连接端口号"
          label="liteflow.rule-source-ext-data-map.port"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapRedisPoll.masterName"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="哨兵模式主节点名"
          label="liteflow.rule-source-ext-data-map.masterName"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapRedisPoll.sentinelAddress"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="哨兵模式哨兵节点连接地址 ip:port"
          label="liteflow.rule-source-ext-data-map.sentinelAddress"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapRedisPoll.username"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="Redis的用户名 (Redis 6.0及以上)"
          label="liteflow.rule-source-ext-data-map.username"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapRedisPoll.password"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="Redis的密码"
          label="liteflow.rule-source-ext-data-map.password"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapRedisPoll.mode"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="规则刷新模式，poll为轮询，sub/subscribe为订阅，默认为轮询"
          label="liteflow.rule-source-ext-data-map.mode"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapRedisPoll.chainDataBase"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="规则数据的数据库号"
          label="liteflow.rule-source-ext-data-map.chainDataBase"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapRedisPoll.chainKey"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="规则数据的Redis key名"
          label="liteflow.rule-source-ext-data-map.chainKey"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapRedisPoll.scriptDataBase"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="脚本组件的数据库号"
          label="liteflow.rule-source-ext-data-map.scriptDataBase"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapRedisPoll.scriptKey"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="脚本组件的Redis key名"
          label="liteflow.rule-source-ext-data-map.scriptKey"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapRedisPoll.pollingInterval"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="轮询时间间隔(s)，默认为60s"
          label="liteflow.rule-source-ext-data-map.pollingInterval"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapRedisPoll.pollingStartTime"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="规则配置后首次轮询的起始时间(s)，默认为60s"
          label="liteflow.rule-source-ext-data-map.pollingStartTime"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
    </VRow>

    <VRow
      v-if="ruleType == 'ruleSourceRedisSub' && configType == 1"
      class="lf-config-row"
    >
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapRedisSub.redisMode"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="Redis模式，single为单点，sentinel为哨兵，默认为单点"
          label="liteflow.rule-source-ext-data-map.redisMode"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapRedisSub.host"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="单点模式Redis连接IP地址"
          label="liteflow.rule-source-ext-data-map.host"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapRedisSub.port"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="单点模式Redis连接端口号"
          label="liteflow.rule-source-ext-data-map.port"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapRedisSub.masterName"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="哨兵模式主节点名"
          label="liteflow.rule-source-ext-data-map.masterName"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapRedisSub.sentinelAddress"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="哨兵模式哨兵节点连接地址 ip:port"
          label="liteflow.rule-source-ext-data-map.sentinelAddress"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapRedisSub.username"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="Redis的用户名 (Redis 6.0及以上)"
          label="liteflow.rule-source-ext-data-map.username"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapRedisSub.password"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="Redis的密码"
          label="liteflow.rule-source-ext-data-map.password"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapRedisSub.mode"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="规则刷新模式，poll为轮询，sub/subscribe为订阅，默认为轮询"
          label="liteflow.rule-source-ext-data-map.mode"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapRedisSub.chainDataBase"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="规则数据的数据库号"
          label="liteflow.rule-source-ext-data-map.chainDataBase"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapRedisSub.chainKey"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="规则数据的Redis key名"
          label="liteflow.rule-source-ext-data-map.chainKey"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapRedisSub.scriptDataBase"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="脚本组件的数据库号"
          label="liteflow.rule-source-ext-data-map.scriptDataBase"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="ruleSourceExtDataMapRedisSub.scriptKey"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="脚本组件的Redis key名"
          label="liteflow.rule-source-ext-data-map.scriptKey"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
    </VRow>

    <VRow
      v-if="ruleType == 'ruleSourceCustom'"
      class="lf-config-row"
    >
      <VCol cols="12">
        <VTextField
          v-model="ruleSource"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="自定义规则配置源：liteflow.rule-source=el_xml:com.yomahub.liteflow.test.TestCustomParser"
          label="liteflow.rule-source"
          append-inner-icon="tabler-info-hexagon"
          @click:append-inner="toggleTip"
        />
      </VCol>
    </VRow>

    <VsDivider
      background="success"
      color="#0a540a"
    >
      基础配置
    </VsDivider>

    <VRow class="lf-config-row">
      <VCol cols="12">
        <VTextField
          v-model="enable"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="liteflow是否开启,默认为true"
          label="liteflow.enable"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="printBanner"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="liteflow的banner打印是否开启,默认为true"
          label="liteflow.print-banner"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="slotSize"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="上下文的最大数量槽,默认值为1024"
          label="liteflow.slot-size"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="mainExecutorWorks"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="FlowExecutor的execute2Future的线程数,默认为64"
          label="liteflow.main-executor-works"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="mainExecutorClass"
          class="lf-config-item"
          counter
          maxlength="128"
          color="success"
          hint="FlowExecutor的execute2Future的自定义线程池com.yomahub.liteflow.thread.LiteFlowDefaultMainExecutorBuilder"
          label="liteflow.main-executor-class"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="requestIdGeneratorClass"
          class="lf-config-item"
          counter
          maxlength="128"
          color="success"
          hint="自定义请求ID的生成类，LiteFlow提供了默认的生成类com.yomahub.liteflow.flow.id.DefaultRequestIdGenerator"
          label="liteflow.request-id-generator-class"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="threadExecutorClass"
          class="lf-config-item"
          counter
          maxlength="128"
          color="success"
          hint="并行节点的线程池Builder，LiteFlow提供了默认的com.yomahub.liteflow.thread.LiteFlowDefaultWhenExecutorBuilder"
          label="liteflow.thread-executor-class"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="whenMaxWaitTime"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="异步线程最长的等待时间(只用于when)，默认值为15000"
          label="liteflow.when-max-wait-time"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="whenMaxWaitTimeUnit"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="异步线程最长的等待时间单位(只用于when)，默认值为MILLISECONDS，毫秒"
          label="liteflow.when-max-wait-time-unit"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="whenMaxWorkers"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="when节点全局异步线程池最大线程数，默认为16"
          label="liteflow.when-max-workers"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="whenQueueLimit"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="when节点全局异步线程池等待队列数，默认为512"
          label="liteflow.when-queue-limit"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="whenThreadPoolIsolate"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="开启WHEN线程池隔离，默认为false"
          label="liteflow.when-thread-pool-isolate"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="parallelLoopMaxWorkers"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="并行循环子项线程池最大线程数，默认为16"
          label="liteflow.parallelLoop-max-workers"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="parallelLoopQueueLimit"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="并行循环子项线程池等待队列数，默认为512"
          label="liteflow.parallelLoop-queue-limit"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="parallelLoopExecutorClass"
          class="lf-config-item"
          counter
          maxlength="128"
          color="success"
          hint="并行循环子项的线程池Builder，LiteFlow提供了默认的com.yomahub.liteflow.test.customThreadPool.CustomThreadBuilder"
          label="liteflow.parallelLoop-executor-class"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="parseOnStart"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="是否在启动的时候就解析规则，默认为true"
          label="liteflow.parse-on-start"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="retryCount"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="全局重试次数，默认为0"
          label="liteflow.retry-count"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="supportMultipleType"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="是否支持不同类型的加载方式混用，默认为false"
          label="liteflow.support-multiple-type"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="nodeExecutorClass"
          class="lf-config-item"
          counter
          maxlength="128"
          color="success"
          hint="全局默认节点执行器com.yomahub.liteflow.flow.executor.DefaultNodeExecutor"
          label="liteflow.node-executor-class"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="printExecutionLog"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="是否打印执行中过程中的日志，默认为true"
          label="liteflow.print-execution-log"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="enableMonitorFile"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="是否开启本地文件监听，默认为false"
          label="liteflow.enable-monitor-file"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="fastLoad"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="是否开启快速解析模式，默认为false"
          label="liteflow.fast-load"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="enableLog"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="监控是否开启，默认不开启"
          label="liteflow.monitor.enable-log"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="queueLimit"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="监控队列存储大小，默认值为200"
          label="liteflow.monitor.queue-limit"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="delay"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="监控一开始延迟多少执行，默认值为300000毫秒，也就是5分钟"
          label="liteflow.monitor.delay"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="period"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="监控日志打印每过多少时间执行一次，默认值为300000毫秒，也就是5分钟"
          label="liteflow.monitor.period"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="fallbackCmpEnable"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="需要在配置文件开启组件降级功能，默认是关闭的"
          label="liteflow.fallback-cmp-enable"
        />
      </VCol>
    </VRow>

    <VDialog
      v-model="isDialogVisible"
      class="ivy-sql-build-dialog"
    >
      <DialogCloseBtn @click="isDialogVisible = !isDialogVisible" />

      <VCard>
        <VCardText>
          <iframe
            :src="iframeSrc"
            width="100%"
            height="600px"
            frameborder="0"
          />
        </VCardText>
      </VCard>
    </VDialog>
  </VForm>
</template>

<script setup>
import { reactive, ref } from 'vue'

const props = defineProps({		
  currRow: Object,
  option: Object,
  addUrl: String,
  updateUrl: String,
})

const emits = defineEmits(['refreshPage'])

// 表单
const isFormValid = ref(false)
const refForm = ref()

const addUrl = ref(props.addUrl)
const updateUrl = ref(props.updateUrl)

const currRow = ref(props.currRow)
const row = currRow.value

const isEdit = ref(!!row.id)


// 监听 connectStr 属性的变化
// watch(() => ruleSourceExtDataMapZk.connectStr, (newConnectStr, oldConnectStr) => {
//   console.log(ruleSourceExtDataMapZk)
// })

// 监听 chainPath 属性的变化
// watch(() => ruleSourceExtDataMapZk.chainPath, (newChainPath, oldChainPath) => {
//   console.log(ruleSourceExtDataMapZk)
// })

// 监听 scriptPath 属性的变化
// watch(() => ruleSourceExtDataMapZk.scriptPath, (newScriptPath, oldScriptPath) => {
//   console.log(ruleSourceExtDataMapZk)
// })

const id = ref(row.id || '')
const configId = ref(row.configId || '')
const configName = ref(row.configName || '')
const ruleType = ref(row.ruleType || 'ruleSource')
const configType = ref(row.configType || 1)
const ruleSource = ref(row.ruleSource || '')
const ruleSourceExtDataMap = ref(row.ruleSourceExtDataMap || '')
const ruleSourceExtData = ref(row.ruleSourceExtData || '')
const enable = ref(row.enable || true)
const printBanner = ref(row.printBanner || true)
const zkNode = ref(row.zkNode || '')
const slotSize = ref(row.slotSize || 1024)
const mainExecutorWorks = ref(row.mainExecutorWorks || 64)
const mainExecutorClass = ref(row.mainExecutorClass || 'com.yomahub.liteflow.thread.LiteFlowDefaultMainExecutorBuilder')
const requestIdGeneratorClass = ref(row.requestIdGeneratorClass || 'com.yomahub.liteflow.flow.id.DefaultRequestIdGenerator')
const threadExecutorClass = ref(row.threadExecutorClass || 'com.yomahub.liteflow.thread.LiteFlowDefaultWhenExecutorBuilder')
const whenMaxWaitTime = ref(row.whenMaxWaitTime || 15000)
const whenMaxWaitTimeUnit = ref(row.whenMaxWaitTimeUnit || 'MILLISECONDS')
const whenMaxWorkers = ref(row.whenMaxWorkers || 16)
const whenQueueLimit = ref(row.whenQueueLimit || 512)
const whenThreadPoolIsolate = ref(row.whenThreadPoolIsolate || false)
const parallelLoopMaxWorkers = ref(row.parallelLoopMaxWorkers || 16)
const parallelLoopQueueLimit = ref(row.parallelLoopQueueLimit || 512)
const parallelLoopExecutorClass = ref(row.parallelLoopExecutorClass || 'com.yomahub.liteflow.thread.LiteFlowDefaultParallelLoopExecutorBuilder')
const parseOnStart = ref(row.parseOnStart || true)
const retryCount = ref(row.retryCount || 0)
const supportMultipleType = ref(row.supportMultipleType || false)
const nodeExecutorClass = ref(row.nodeExecutorClass || 'com.yomahub.liteflow.flow.executor.DefaultNodeExecutor')
const printExecutionLog = ref(row.printExecutionLog || true)
const enableMonitorFile = ref(row.enableMonitorFile || false)
const fastLoad = ref(row.fastLoad || false)
const enableLog = ref(row.enableLog || false)
const queueLimit = ref(row.queueLimit || 200)
const delay = ref(row.delay || 300000)
const period = ref(row.period || 300000)
const fallbackCmpEnable = ref(row.fallbackCmpEnable || false)

const ruleSourceJson = ruleSourceExtDataMap.value ? JSON.parse(ruleSourceExtDataMap.value) : {}

const ruleSourceExtDataMapZk = reactive({
  connectStr: ruleSourceJson.connectStr || '',
  chainPath: ruleSourceJson.chainPath || '',
  scriptPath: ruleSourceJson.scriptPath || '',
})

const ruleSourceExtDataMapSql = reactive({
  url: ruleSourceJson.url || 'jdbc:mysql://127.0.0.1:3306/ivy',
  driverClassName: ruleSourceJson.driverClassName || 'com.mysql.cj.jdbc.Driver',
  username: ruleSourceJson.username || 'root',
  password: ruleSourceJson.password || '123456',
  applicationName: ruleSourceJson.applicationName || 'demo',
  sqlLogEnabled: ruleSourceJson.sqlLogEnabled || 'false',
  pollingEnabled: ruleSourceJson.pollingEnabled || 'false',
  pollingIntervalSeconds: ruleSourceJson.pollingIntervalSeconds || '60',
  pollingStartSeconds: ruleSourceJson.pollingStartSeconds || '60',
  chainTableName: ruleSourceJson.chainTableName || 'ivy_lf_el_table',
  chainApplicationNameField: ruleSourceJson.chainApplicationNameField || 'application_name',
  chainNameField: ruleSourceJson.chainNameField || 'chain_name',
  elDataField: ruleSourceJson.elDataField || 'el_data',
  chainEnableField: ruleSourceJson.chainEnableField || 'enable',
  scriptTableName: ruleSourceJson.scriptTableName || 'ivy_lf_script_node_table',
  scriptApplicationNameField: ruleSourceJson.scriptApplicationNameField || 'application_name',
  scriptIdField: ruleSourceJson.scriptIdField || 'script_node_id',
  scriptNameField: ruleSourceJson.scriptNameField || 'script_node_name',
  scriptDataField: ruleSourceJson.scriptDataField || 'script_node_data',
  scriptTypeField: ruleSourceJson.scriptTypeField || 'script_node_type',
  scriptLanguageField: ruleSourceJson.scriptLanguageField || 'script_language',
  scriptEnableField: ruleSourceJson.scriptEnableField || 'enable',
})

const ruleSourceExtDataMapNacos = reactive({
  serverAddr: ruleSourceJson.serverAddr || '',
  dataId: ruleSourceJson.dataId || '',
  group: ruleSourceJson.group || '',
  namespace: ruleSourceJson.namespace || '',
  username: ruleSourceJson.username || '',
  password: ruleSourceJson.password || '',
  accessKey: ruleSourceJson.accessKey || '',
  secretKey: ruleSourceJson.secretKey || '',
})

const ruleSourceExtDataMapEtcd = reactive({
  endpoints: ruleSourceJson.endpoints || '',
  chainPath: ruleSourceJson.chainPath || '',
  scriptPath: ruleSourceJson.scriptPath || '',
})

const ruleSourceExtDataMapApollo = reactive({
  chainNamespace: ruleSourceJson.chainNamespace || '',
  scriptNamespace: ruleSourceJson.scriptNamespace || '',
})

const ruleSourceExtDataMapRedisPoll = reactive({
  redisMode: ruleSourceJson.redisMode || '',
  host: ruleSourceJson.host || '',
  port: ruleSourceJson.port || '',
  masterName: ruleSourceJson.masterName || '',
  sentinelAddress: ruleSourceJson.sentinelAddress || '',
  username: ruleSourceJson.username || '',
  password: ruleSourceJson.password || '',
  mode: ruleSourceJson.mode || '',
  chainDataBase: ruleSourceJson.chainDataBase || '',
  chainKey: ruleSourceJson.chainKey || '',
  scriptDataBase: ruleSourceJson.scriptDataBase || '',
  scriptKey: ruleSourceJson.scriptKey || '',
  pollingInterval: ruleSourceJson.pollingInterval || '',
  pollingStartTime: ruleSourceJson.pollingStartTime || '',
})

const ruleSourceExtDataMapRedisSub = reactive({
  redisMode: ruleSourceJson.redisMode || '',
  host: ruleSourceJson.host || '',
  port: ruleSourceJson.port || '',
  masterName: ruleSourceJson.masterName || '',
  sentinelAddress: ruleSourceJson.sentinelAddress || '',
  username: ruleSourceJson.username || '',
  password: ruleSourceJson.password || '',
  mode: ruleSourceJson.mode || '',
  chainDataBase: ruleSourceJson.chainDataBase || '',
  chainKey: ruleSourceJson.chainKey || '',
  scriptDataBase: ruleSourceJson.scriptDataBase || '',
  scriptKey: ruleSourceJson.scriptKey || '',
})

const getUrl = () => {
  if(isEdit.value){
    return updateUrl.value
  }
  
  return addUrl.value
}

const saveItem = async () => {
  refForm.value?.validate().then(({ valid }) => {
    if(valid) {
      onSubmit()
    }
  })
}

const getRuleSourceExtDataMap = () => {
  const ruleTypeVal = ruleType.value
  if(ruleTypeVal == 'ruleSourceZk'){
    return JSON.stringify(ruleSourceExtDataMapZk)
  }else if(ruleTypeVal == 'ruleSourceSql'){
    return JSON.stringify(ruleSourceExtDataMapSql)
  }else if(ruleTypeVal == 'ruleSourceNacos'){
    return JSON.stringify(ruleSourceExtDataMapNacos)
  }else if(ruleTypeVal == 'ruleSourceEtcd'){
    return JSON.stringify(ruleSourceExtDataMapEtcd)
  }else if(ruleTypeVal == 'ruleSourceApollo'){
    return JSON.stringify(ruleSourceExtDataMapApollo)
  }else if(ruleTypeVal == 'ruleSourceRedisPoll'){
    return JSON.stringify(ruleSourceExtDataMapRedisPoll)
  }else if(ruleTypeVal == 'ruleSourceRedisSub'){
    return JSON.stringify(ruleSourceExtDataMapRedisSub)
  }
  
  return ''
}

const onSubmit = async () => {
  const ruleSourceExtDataMap = getRuleSourceExtDataMap()

  const res = await $ivyApi.post(getUrl(), {
    id: id.value,
    configId: configId.value,
    configName: configName.value,
    ruleType: ruleType.value,
    configType: configType.value,
    ruleSource: ruleSource.value,
    ruleSourceExtDataMap: ruleSourceExtDataMap,
    ruleSourceExtData: ruleSourceExtData.value,
    enable: enable.value,
    printBanner: printBanner.value,
    zkNode: zkNode.value,
    slotSize: slotSize.value,
    mainExecutorWorks: mainExecutorWorks.value,
    mainExecutorClass: mainExecutorClass.value,
    requestIdGeneratorClass: requestIdGeneratorClass.value,
    threadExecutorClass: threadExecutorClass.value,
    whenMaxWaitTime: whenMaxWaitTime.value,
    whenMaxWaitTimeUnit: whenMaxWaitTimeUnit.value,
    whenMaxWorkers: whenMaxWorkers.value,
    whenQueueLimit: whenQueueLimit.value,
    whenThreadPoolIsolate: whenThreadPoolIsolate.value,
    parallelLoopMaxWorkers: parallelLoopMaxWorkers.value,
    parallelLoopQueueLimit: parallelLoopQueueLimit.value,
    parallelLoopExecutorClass: parallelLoopExecutorClass.value,
    parseOnStart: parseOnStart.value,
    retryCount: retryCount.value,
    supportMultipleType: supportMultipleType.value,
    nodeExecutorClass: nodeExecutorClass.value,
    printExecutionLog: printExecutionLog.value,
    enableMonitorFile: enableMonitorFile.value,
    fastLoad: fastLoad.value,
    enableLog: enableLog.value,
    queueLimit: queueLimit.value,
    delay: delay.value,
    period: period.value,
    fallbackCmpEnable: fallbackCmpEnable.value,
  })

  emits('refreshPage', res)
}

const iframeSrc = ref()
const isDialogVisible = ref(false)

const toggleTip = () => {
  isDialogVisible.value = true

  const ruleTypeVal = ruleType.value
  if(ruleTypeVal == 'ruleSource'){
    iframeSrc.value = 'https://liteflow.cc/pages/51ddd5/'
  }else if(ruleTypeVal == 'ruleSourceZk'){
    iframeSrc.value = 'https://liteflow.cc/pages/ffc345/'
  }else if(ruleTypeVal == 'ruleSourceSql'){
    iframeSrc.value = 'https://liteflow.cc/pages/236b4f/'
  }else if(ruleTypeVal == 'ruleSourceNacos'){
    iframeSrc.value = 'https://liteflow.cc/pages/09b776/'
  }else if(ruleTypeVal == 'ruleSourceEtcd'){
    iframeSrc.value = 'https://liteflow.cc/pages/4bfac2/'
  }else if(ruleTypeVal == 'ruleSourceApollo'){
    iframeSrc.value = 'https://liteflow.cc/pages/bea809/'
  }else if(ruleTypeVal == 'ruleSourceRedisPoll'){
    iframeSrc.value = 'https://liteflow.cc/pages/186747/'
  }else if(ruleTypeVal == 'ruleSourceRedisSub'){
    iframeSrc.value = 'https://liteflow.cc/pages/3f553f/'
  }else if(ruleTypeVal == 'ruleSourceCustom'){
    iframeSrc.value = 'https://liteflow.cc/pages/25f2c0/'
  }
}

defineExpose({
  saveItem,
})
</script>

<style scoped>
.lf-config-row .v-col {
  padding-block-end: 3px;
}

.lf-config-item {
  padding-block-start: 8px;
}
</style>

<style>
.lf-config-item .v-input__control .v-field--appended .v-field__append-inner{
  cursor: pointer;
}
</style>
